﻿<template>
  <el-dialog v-el-drag-dialog class="dialog-mini" width="500px" title="新增/编辑" :visible.sync="visible">
    <el-form :rules="rules" ref="dataForm" :model="temp" label-position="right" label-width="100px">

      <el-form-item size="small" label="服务名称" prop="serviceName">
        <el-input v-model="temp.serviceName"></el-input>
      </el-form-item>
      <el-form-item size="small" label="概述" prop="summary">
        <el-input v-model="temp.summary"></el-input>
      </el-form-item>
      <el-form-item size="small" label="是否默认" prop="isDefault">
        <template>
          <el-radio-group v-model="temp.isDefault">
            <el-radio :label=10>是</el-radio>
            <el-radio :label=-10>否</el-radio>
          </el-radio-group>
        </template>
      </el-form-item>

      <el-form-item size="small" label="用户端是否展示" prop="status">
        <template>
          <el-radio-group v-model="temp.status">
            <el-radio :label=10>显示</el-radio>
            <el-radio :label=-10>否</el-radio>
          </el-radio-group>
        </template>
      </el-form-item>
      <el-form-item size="small" label="排序(小到大)" prop="sortNo">
        <el-input-number v-model="temp.sortNo" :min=0 :max=1000></el-input-number>
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button size="mini" @click="visible = false">取消</el-button>
      <el-button size="mini" type="primary" @click="saveData">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
import elDragDialog from '@/directive/el-dragDialog'
import * as apiGoodsService from '@/api/goods/goodsservice'
export default {
  components: {},
  directives: {
    elDragDialog
  },
  data() {
    return {
      temp: {},
      visible: false,
      rules: {
        name: [{ required: true, message: '名称不能为空', trigger: 'blur' }]
      },
    }
  },
  created() {
    //随列表页创建时调用
  },
  methods: {
    //显示对话框
    show(record) {
      this.visible = true;
      if (record) {
        // this.temp = record;
        this.getDetail(record.id)
      } else {
        this.temp = {}
        // 更新form元素
        this.$nextTick(() => {
          this.$forceUpdate();
        });
      }
    },
    getDetail(id) { // 获取详情
      apiGoodsService.getDetail({ id: id }).then((res) => {
        this.temp = res.result;
        // 更新form元素
        this.$nextTick(() => {
          this.$forceUpdate();
        });
      })
    },
    saveData() { // 更新提交
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          const tempData = Object.assign({}, this.temp)
          apiGoodsService.addOrUpdate(tempData).then((res) => {
            // 显示成功
            this.$message.success(res.message, 1.5);
            // 关闭对话框事件
            this.handleCancel();
            // 通知父端组件提交完成了
            this.$emit("handleSubmit");
          })
        }
      })
    },
    //  关闭对话框事件
    handleCancel() {
      this.visible = false;
      this.$nextTick(() => {
        this.$forceUpdate();
      });
    },

  }
}
</script>
<style scoped>
</style>
